<template>
    <div class="bg page-servedetail">
		<div class="article clearFix">
			<img class="banner" :src="serveDetail.banner" />
			<div class="cont">
				<h1>
					<div class="icon-cont">
						<img :src="serveDetail.icon" />
					</div>
					<b>{{serveDetail.name}}</b>
				</h1>
				<article>{{serveDetail.description}}</article>
				<ul class="clearFix">
					<li key="index" v-for="(item,index) in serveDetail.options">
						<h2 :class="'icon-'+(++index)"></h2>
						<em>{{item.name}}</em>
						<p v-for="text in item.texts">{{text}}</p>
					</li>
				</ul>
			</div>
			<div v-if="serveDetail.realImgs&&serveDetail.realImgs[0]" class="imgs clearFix">
				<h3>服务场景<b></b></h3>
				<img v-for="(item,index) in serveDetail.realImgs" key="index" :src="item" />
			</div>
		</div>        
        
        <footer>
        	<router-link :to="{name: 'ServeCreate',query: {serveId: serveId,serveName: serveName,vendorId:serveDetail.vendorId,vendorMobile:serveDetail.vendorMobile}}"><div class="left"> 提交需求 </div></router-link>
        	<div @click="openlist" class="right"> 联系我们 </div>
        </footer>
        <div @click.stop="closelist" v-if="listStatus" class="openlist">
        	<ul @click.stop="">
        		<li>{{serveDetail.vendorMobile}}</li>
        		<li class="call">
        			<a :href="'tel:'+serveDetail.vendorMobile">呼叫</a> 
        		</li>
        		<li @click.stop="closelist" class="cancle">取消</li>
        	</ul>
        </div>
    </div>
</template>

<script>

	import http from '../services/http';
	import { mapState } from 'vuex';
	
    export default {
    	name:'serve-detail',
        data() {
	        return {
	        	listStatus:false,
	      		serveId:null,
	      		serveName:null,
	        }
	    },
	    computed: {
		    ...mapState({
		      serveDetail: state => state.serve.serveDetail,
		    })
		},
	    mounted() {
			this.serveId = this.$route.query.id;
			this.serveName = this.$route.query.name;
			
			this.$store.dispatch({
				type:"getServeDetail",
				serveId:this.serveId,
			});
	    },
	    methods:{
	    	openlist(){
	    		this.listStatus = true;
	    	},
	    	closelist(){
	    		this.listStatus = false;
	    	},
	    	
	    },
    };
	
</script>

<style lang="scss">
.page-servedetail {
	background: #ffffff;
	
	.article{
		width: 100%;
		min-height: 100%;
		padding-bottom: 45px;
		.banner{
			float: left;
			width: 100%;
		}
		.cont{
			float: left;
			width: 100%;
			padding: 0 28px 20px;
			h1{
				position: relative;
				padding: 15px 0;
				padding-left: 74px;
				font-size: 1.25rem;
				line-height: 20px;
				margin: 0;
				color: #434a4d;
				.icon-cont{
					position: absolute;
					height: 78px;
					width: 78px;
					left: -10px;
					top: -20px;
					padding: 11px 18px;
					background: transparent url(../assets/img/icon/icon-bg.png) no-repeat center / 100% auto;
					img{
						float: left;
						height: 42px;
						width: 42px;
					}
				}
			}
			article{
				font-size: 0.6875rem;
				color: #666666;
				line-height: 20px;
				padding: 10px 0;
			}
			ul{
				padding: 10px 0;
				li:last-child{
					margin-right: 0;
				}
				li{
					width: 30%;
					float: left;
					margin-right: 5%;
					h2{
						height: 30px;
						text-align: center;
						margin-bottom: 5px;
						&.icon-1{
							background: transparent url(../assets/img/icon/servedetail-1.png) no-repeat center / auto 100% ;
						}
						&.icon-2{
							background: transparent url(../assets/img/icon/servedetail-2.png) no-repeat center / auto 100% ;
						}
						&.icon-3{
							background: transparent url(../assets/img/icon/servedetail-3.png) no-repeat center / auto 100% ;
						}
						
						img{
							height: 100%;
							width: auto;		
						}
					}
					em{
						color: #2dbe60;
						font-size: 0.75rem;
						display: block;
						text-align: center;
						font-weight: 600;
						line-height: 15px;
						padding: 5px 0;
					}
					p{
						color: #666666;
						font-size: 0.75rem;
						text-align: center;
						font-weight: 600;
						line-height: 15px;
						padding: 3px 0;
					}
				}
			}
		}
		
		
		
		
		.imgs{
			float: left;
			width: 100%;
			padding: 20px;
			background: #f8faf4;
			
			h3{
				font-size: 1rem;
				text-align: center;
				color: #434a4d;
				height: 30px;
				line-height: 30px;
				font-weight: 600;
				margin-bottom: 20px;
				width: 100%;
				float: left;
				position: relative;
				b{
					height: 3px;
					width: 30px;
					border-radius: 1.5px;
					display: block;
					left: 50%;
					margin-left: -15px;
					position: absolute;
					bottom: 0;
					background: #2dbe60;
				}
			}
			img{
				height: auto;
				width: 100%;
				float: left;
				margin-bottom: 20px;
			}
		}
		
		
		
		
	}
	
	footer{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 50px;
		z-index: 20;
		background: #FFFFFF;
		padding: 15px 0;
		box-shadow: 0px 0px 10px 0px #bbbbbb;
		a{
			display: block;
			float: left;
			width: 50%;
			height: 100%;
		}
		div{
			width: 50%;
			height: 100%;
			float: left;
			font-size: 1rem;
			line-height: 20px;
			text-align: center;
			font-weight: 600;
			
			&.left{
				width: 100%;
				color: #ea5504;
				border-right: solid 1px #cccccc;
			}
			&.right{
				color: #2dbe60;
			}
		}
	}
	.openlist{
		position: fixed;
		z-index: 30;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(0,0,0,0.4);
		animation:openPhoneList .2s ease-in-out;
		
		ul{
			position: fixed;
			width: 100%;
			left: 0;
			right: 0;
			bottom: 0;
			background: #f5f5f5;
			li{
				height: 50px;
				line-height: 50px;
				text-align: center;
				background: #ffffff;
				font-size: 0.85rem;
				color: #979797;
				cursor: pointer;
				&.call{
					font-size: 1.05rem;
					color: #2dbe60;		
					margin-bottom: 5px;
					border-top: solid 1px #e6e6e6;
					a{
						display: block;
						height: 100%;
						width: 100%;
						color: #2dbe60;		
					}
				}
				&.cancle{
					font-size: 1.05rem;
					color: #666666;		
				}
			}
		}
	}
	@keyframes openPhoneList{
	    0%{opacity: 0;}
	    100%{opacity: 1;}
	}
}


</style>
